<!--
 * @Author: liaoxing
 * @Date: 2022-01-14 09:20:26
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-07 14:42:54
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\views\business\quote\params\index.vue
-->
<template>
  <div class="quoteReportInput">
    <header class="flex-align-center relative">
      <span class="blueLine"></span>
      <span style="margin-left: 10px">{{ (editData && editData.id) ? '参数修改' : '参数录入' }}</span>
      <el-button v-if="!editData" class="absolute" style="right: 10px" size="mini" type="primary" icon="el-icon-plus" @click="addParams">添加参数</el-button>
    </header>
    <main v-loading="loading">
      <el-collapse v-model="activeNames" @change="handleChange" v-if="paramsList.length">
        <el-collapse-item :name="index + 1 + ''" v-for="(item, index) in paramsList" :key="'paramsList' + index">
          <template slot="title">
            {{ item.parameterName || '未填写名称' }} 
            <i @click.stop="deleteCollapseItem(index)" class="title-icon el-icon-delete"></i>
          </template>
          <div class="collapsItemBox flex-center">
            <div style="padding: 20px">
              <collapsItem :id="id" :formData="item" :formIndex="index" :ref="'formData' + index"></collapsItem>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- <div class="submitBox flex-center" v-if="paramsList.length">
        <el-button>取消</el-button>
        <el-button style="margin-left: 40px" type="primary" @click="submintForm">提交</el-button>
      </div> -->
      <el-empty style="height: 100%" v-else description="请添加参数"></el-empty>
    </main>
  </div>
</template>

<script>
import collapsItem from "./collapsItem/index.vue"
const paramsTemplate = (id, type) => {
  return {
    folderId: id,
    parameterName: "",
    parameterType: type,
    parameterValueFrom: "",
    durationType: "",
    parameterValueMaintainer: "",
    dependency: "",
    parameterValueType: "string",
    parameterWidget: "input"
  }
}
const paramsTemplateCalc = (id, type) => {
  return {
    folderId: id,
    attr: "",
    isEfficiencyItem: 1,
    parameterName: "",
    parameterType: type,
    calculator:"",
    calculatorText:""
  }
}
export default {
  name: "",
  components: {
    collapsItem
  },
  props: ['dialog', 'id', 'editData','type'],
  data () {
    return {
      loading: false,
      paramsList: [],
      activeNames: ['1'],
    }
  },
  watch: {
  },
  created () {
    if (this.type != "ASSEMBLE") {
      this.paramsList.push(this.editData ? this.editData : paramsTemplate(this.id, this.type))
    } else {
      this.paramsList.push(this.editData ? this.editData : paramsTemplateCalc(this.id, this.type))
    }
    
  },
  methods: {
    handleChange (para) {
      console.log(para)
    },
    addParams () {
      if (this.type == "BASE") {
        this.paramsList.push(paramsTemplate(this.id, this.type))
      } else {
        this.paramsList.push(paramsTemplateCalc(this.id, this.type))
      }
      
      this.$nextTick(() => {
        this.activeNames.push(this.paramsList.length + '')
      })
    },
    deleteCollapseItem (index) {
      this.$confirm('确定删除该参数吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.paramsList.splice(index, 1)
      })
    },
    async submintForm () {
      if (!this.paramsList.length) {
        this.$message.info("参数录入为空！")
        return
      }
      this.loading = true
      let status;
      for(let i in this.$refs) {
        status = await this.$refs[i][0].submitItem()
        if (status !== true) {
          let index = this.activeNames.findIndex(item => item == status + 1 + '')
          if (index < 0) {
            this.activeNames.push(status + 1 + '')
          }
          // this.$emit('update:dialog', false)
          this.loading = false
          break
        }
      }
      if (status === true) {
        this.$emit('update:dialog', false)
        this.$emit('queryNewList')

        this.paramsList = []
        this.paramsList.push(paramsTemplate(this.id))
      }
      this.loading = false
    }
  }
}
</script>

<style lang="less">
.quoteReportInput{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // padding: 16px;
  // background-color: #f3f5fa;
  
  header {
    height: 40px;
    background-color: white;
    color: #666666;
    .blueLine {
      margin-left: 5px;
      height: 20px;
      width: 5px;
      background-color: #246cff;
    }
  }
  main{
    overflow: auto;
    margin-top: 20px;
    height: calc(100% - 60px);
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
    .title-icon{
      color: #246cff;
      cursor: pointer;
      margin-left: 20px;
    }
    .submitBox{
      height: 90px;
    }
  }
}
</style>